/* eslint-disable */
<template>
  <div class="login">
    <div class="logo">
      <img src="static/images/logo.jpg" alt="my login image" />
    </div>
    <!-- 手机号 -->
    <InputGroup
      type="number"
      v-model="phone"
      placeholder="手机号"
      :btnTitle="btnTitle"
      :disabled="disabled"
      :error="errors.phone"
      @btnClick="getVerifyCode"
    />
    <!-- 验证码 -->
    <InputGroup type="number" v-model="verifyCode" placeholder="验证码" :error="errors.code" />

    <!-- 用户服务协议 -->
    <div class="login_des">
      <p>
        新用户登录即自动注册，表示已同意
        <span>《用户服务协议》</span>
      </p>
    </div>
    <!-- 登录按钮 -->
    <div class="login_btn">
      <button :disabled="isClick" @click="handleLogin">登录</button>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import Qs from 'qs'
import InputGroup from "./components/InputGroup.vue";
export default {
  name: "login",
  data() {
    return {
      phone: "",
      verifyCode: "",
      errors: {},
      btnTitle: "获取验证码",
      disabled: false,
    };
  },
  computed: {
    isClick(){
      if(!this.phone || !this.verifyCode){
        //只要有一个为空就返回true
        return true
      }else{
        return false
      }
    }
  },
  methods: {
    handleLogin(){
        //清空错误信息
        this.errors = {}
        //发送登录请求
        axios.get("/api/login.json")
        .then((res)=>{
          if(res.data.data === "success"){
            localStorage.setItem('ele_login',true)//储存数据
            this.$router.push("/")
          }
        })
    },

    getVerifyCode() {
      if (this.validatePhone()) {
        //倒计时
        this.validateBtn();
        var data = Qs.stringify({"matterIds":"1,2,3"});
        //发送网络请求
        axios.get('api/ele/code.json',data,{headers:{'Content-Type':'application/x-www-form-urlencoded'}})  //,{params: {"code":1234,"name": "yyyy"}}
        .then((res)=>{
          console.log(res)
        })


      }
    },
    validateBtn() {
      let time = 60;
      let timer = setInterval(() => {
        if (time === 0) {
          clearInterval(timer);
          this.btnTitle = "获取验证码";
          //可以点击
          this.disabled = false;
        } else {
          this.btnTitle = time + "秒后发送";
          this.disabled = true;
          time--;
        }
      }, 1000);
    },
    validatePhone() {
      //验证手机号码
      if (!this.phone) {
        this.errors = {
          phone: "手机号码不能为空"
        };
        return false;
      } else if (!/^1[3-8]\d{9}$/.test(this.phone)) {
        //正则验证手机号
        this.errors = {
          phone: "请填写正确的手机号"
        };
        return false;
      } else {
        this.errors = {};
        return true;
      }
    }
  },
  components: {
    InputGroup
  }
};
</script>


<style scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 30px;
  box-sizing: border-box;
  background: #fff;
}

.logo {
  text-align: center;
}
.logo img {
  width: 150px;
}
.text_group,
.login_des,
.login_btn {
  margin-top: 20px;
}
.login_des {
  color: #aaa;
  line-height: 22px;
}
.login_des span {
  color: #4d90fe;
}
.login_btn button {
  width: 100%;
  height: 40px;
  background-color: #48ca38;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  border: none;
  outline: none;
}
.login_btn button[disabled] {
  background-color: #8bda81;
}
</style>
